<template>
    <div class="placeholder"></div>
    <van-tabbar v-model="active">
        <van-tabbar-item icon="chat-o" :badge="badge">聊天</van-tabbar-item>
        <van-tabbar-item icon="friends-o">通讯录</van-tabbar-item>
        <van-tabbar-item icon="contact">我</van-tabbar-item>
    </van-tabbar>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {TabbarItemProps} from "vant";
import {useFriendStore} from "../../../store/friend";

// 实例化路由
const router = useRouter()
const route = useRoute()

const active = ref(0)
// active 与 页面name 的映射
const pageName: string[] = ["home", "phonebook", "user"]

onMounted(() => {
    active.value = pageName.indexOf(route.name as string)
})

// 监听active的变化
watch(active, (newValue) => {
    // 跳转对应的路由
    router.push({
        name: pageName[newValue]
    })
})

// 未读的消息数量
const badge = ref<number>(0)

// 实例化仓库
const friendStore = useFriendStore()
// 获取好友列表
friendStore.getFriendList()

// 订阅仓库
friendStore.$subscribe((mutation, state)=>{
    badge.value = friendStore.unReadCount
})

</script>

<style scoped lang="less">
.placeholder {
    height: 50px;
}
</style>